<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title style="font-size: 20px;">Track</title>

		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				background-color: #ddd;
			}
			#map {
				width: 100%;
				height: 100%;
			}

			#btns {
				display: flex;
				flex-direction: column;
				z-index: 99999999;
				position: absolute;
				bottom: 15%;
				right: 0%;
				width: 60px;
				overflow: hidden;
				align-items: center;
			}

			button {
				width: 46px;
				height: 46px;
				border-radius: 50%;
				outline: none;
				border: none;
				margin-bottom: 20px;
				background-color: #f1f1f1;
				color: #fff;
				z-index: 99999999;

			}

			#playTrackRecord {
				background-image: url("map/play_track.png");
				background-size: 60%;
				background-repeat: no-repeat;
				/* 防止背景图片重复 */
				background-position: 50%;
				border-radius: 50%;
				display: none;
			}

			/* linear-gradient(to right, , #3185FC, #0047AB, #6495ED) */
			.custom-range {
				-webkit-appearance: none;
				width: 90%;
				height: 16px;
				background: '#6ac695';
				outline: none;
				opacity: 1;
				-webkit-transition: .2s;
				transition: opacity .2s;
				border-radius: 9px;
				position: absolute;
				bottom: 30px;
				left: 5%;

			}

			.custom-range:hover {
				opacity: 1;
			}


			.custom-range::-webkit-slider-thumb {
				-webkit-appearance: none;
				/* 覆盖默认外观 */
				width: 30px;
				/* 滑块的宽度 */
				height: 30px;
				/* 滑块的高度 */
				background-image: url('map/navigation_track.png');
				/* 设置滑块的图片 */
				background-size: cover;
				/* 背景图片覆盖整个滑块 */
				border-radius: 50%;
				/* 滑块设置为圆形 */
			}

			.custom-range::-moz-range-thumb {
				width: 30px;
				/* 滑块的宽度 */
				height: 30px;
				/* 滑块的高度 */
				background-image: url('map/navigation_track.png');
				/* 设置滑块的图片 */
				background-size: cover;
				/* 背景图片覆盖整个滑块 */
				border-radius: 50%;
				/* 滑块设置为圆形 */
			}

			.custom-range::-ms-thumb {
				width: 30px;
				/* 滑块的宽度 */
				height: 30px;
				background-image: url("map/navigation_track.png");
				/* 设置滑块的图片 */
				background-size: cover;
				/* 背景图片覆盖整个滑块 */
				border-radius: 50%;
				/* 滑块设置为圆形 */
			}

			#slideTime {
				background-color: #fff;
				width: 60px;
				height: 30px;
				color: #333;
				font-size: 13px;
				border-radius: 8px;
				display: flex;
				justify-content: center;
				align-items: center;
				display: none;
				margin-top: 0px;
				position: fixed;
			}

			.bottom {
				background-color:transparent;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				/* 圆角 */
				margin: 0 10px;
				/* 左右边距20像素 */
				position: absolute;
				/* 固定位置 */
				bottom: 0;
				height: 90px;
				/* 底部对齐 */
				width: calc(100% - 20px);
				/* 宽度计算，‌确保左右边距后宽度仍然是全屏 */
				text-align: center;
				z-index: 999999;
				display: none;
				transition: transform 0.5s, opacity 0.5s;
				opacity: 1;

			}
			.bottom_hidden {
				opacity: 0;
				transform: translateY(100%);
			}
			.palying_bottom {
				background-color: #6ac695;
				/* 左右边距20像素 */
				position: fixed;
				/* 固定位置 */
				bottom: 0;
				/* 底部对齐 */
				width: 100%;
				/* 宽度计算，‌确保左右边距后宽度仍然是全屏 */
				height: 70px;
				/* 上下内边距，‌可以根据需要调整 */
				z-index: 999999;
				display: flex;
				align-items: center;
				justify-content: space-between;
				transition: transform 0.5s, opacity 0.5s;
				opacity: 1;
				transform: translateY(100%);
			}
			.playingtitle {
				color: #fff;
				font-size: 16px;
				margin-left: 10px;
			}
			.right {
				margin-right: 10px;
				display: flex;
				align-items: center;
				justify-content: start;
			}
			#play_btn {
				width: 36px;
				height: 36px;
				margin-right: 10px;
				overflow: hidden;
			}
			#stop_btn {
				width: 36px;
				height: 36px;
			}
			.gm-style iframe+div {
				border: none !important;
			}

			a[href^="http://maps.google.com/maps"] {
				display: none !important
			}

			a[href^="https://maps.google.com/maps"] {
				display: none !important
			}
			#time {
				background-color: #fff;
				width: 70px;
				height: 30px;
				color: #333;
				font-size: 14px;
				border-radius: 8px;
				display: flex;
				justify-content: center;
				align-items: center;
				display: none;
			}
			.tips_logo {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				position: absolute;
				left: 25%;
			}
			.space {
				height: 30px;
				width: 60px;
			}
			.gmnoprint a,
			.gmnoprint span,
			.gm-style-cc {
				display: none;
			}
			.gmnoprint div {
				background: none !important;
			}
		</style>
	</head>

	<body>
		<div id='map'></div>

		<div id="btns">
			<button id="playTrackRecord"> </button>
		</div>
		<!-- onchange="setProgress(this.value)" -->
		<div class="bottom" id="bottom">
			<div id="slideTime">
				
			</div>
			<input type="range" min="0" class="custom-range" step="1" id="custom-range" onchange="progressChange(this)"
				oninput="updateValue(this)">

		</div>
		<div class="palying_bottom" id="palying_bottom">
			<div class="playingtitle">Track playback in progres</div>
			<div class="right">
				<img id="play_btn" src="./map/pause_btn.png" alt="" />
				<img id="stop_btn" src="./map/stop_play.png" alt="" />
			</div>
		</div>
	</body>

	<script type="text/javascript" src="../uni.webview.1.5.2.js">
	</script>
	<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
	<script>
		(g => {
			var h, a, k, p = "The Google Maps JavaScript API",
				c = "google",
				l = "importLibrary",
				q = "__ib__",
				m = document,
				b = window;
			b = b[c] || (b[c] = {});
			var d = b.maps || (b.maps = {}),
				r = new Set,
				e = new URLSearchParams,
				u = () => h || (h = new Promise(async (f, n) => {
					await (a = m.createElement("script"));
					e.set("libraries", [...r] + "");
					for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
					e.set("callback", c + ".maps." + q);
					a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
					d[q] = f;
					a.onerror = () => h = n(Error(p + " could not load."));
					a.nonce = m.querySelector("script[nonce]")?.nonce || "";
					m.head.append(a)
				}));
			d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[
				l](f, ...n))
		})({
			key: "AIzaSyCaJJDLbPygLYHFL1vi6AlcQmR1P1rRDvA",
			v: "weekly",
			// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
			// Add other bootstrap parameters as needed, using camel case.
		});
	</script>
	<script type="text/javascript">
		// 获取url参数
		function getUrlParams(url) {
			const paramsRegex = /[?&]+([^=&]+)=([^&]*)/gi;
			const params = {};
			let match;
			while (match = paramsRegex.exec(url)) {
				params[match[1]] = match[2];
			}
			return params;
		}
		var pathList = [];
		let map;
		let marker;
		let polyline;
		let path = [];
		let index = 0;
		let animationFrameId;
		let dotMarkerArray = [];
		var trackStyle = null;
		let sliderValue = 0;
		let interver = null;
		let playing = false;
		var firstMarkerTime;
		// 加载地图
		async function initMap() {
			const {
				Map
			} = await google.maps.importLibrary("maps");

			map = new Map(document.getElementById("map"), {
				zoom: 14,
				mapId: '9acf2d6299ded60c',//"4504f8b37365c3d0"
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				zoomControl: false,
				mapTypeControl: false,
				fullscreenControl: false,
				scaleControl: false,
				clickableIcons: false,
				streetViewControl: false,
				center: path[0],
				clickableIcons: false,
				maxZoom: 16,
				minZoom: 12, // 最小缩放级别
			});

			const {
				AdvancedMarkerElement
			} = await google.maps.importLibrary("marker");


			map.addListener('tilesloaded', function() {
				console.log('map finish loaded');

			});

			// 监听地图移动事件
			map.addListener('idle', () => {
				// console.log("idle");
				// 判断是否进入了新区域
				// map.panTo(path[index]);

			});
			// if(path.length > 0){
				setTimeout(() => {
					createTrackRecord();
				}, 2000)
			// }
		}
		async function createMoveMarker() {
			const {
				AdvancedMarkerElement
			} = await google.maps.importLibrary("marker");
			
			if (marker) {
				marker.setMap(null);
				marker == null;
			}
			const playFlagImg = document.createElement("img");
			playFlagImg.style.width = '40px'
			playFlagImg.style.height = '40px'
			playFlagImg.src = 'map/starter_tracker.png'
			marker = new google.maps.marker.AdvancedMarkerElement({
				map,
				position: path[0],
				content: buildContent(),
			});
		}
		
		
		function stampToDateTime(timestamp) {
		
			var date = new Date(Number(timestamp)); // 转换为Date对象
			var year = date.getFullYear(); // 获取年份
			var month = ("0" + (date.getMonth() + 1)).slice(-2); // 获取月份，转为两位数
			var day = ("0" + date.getDate()).slice(-2); // 获取日，转为两位数
			var hours = ("0" + date.getHours()).slice(-2); // 获取小时，转为两位数
			var minutes = ("0" + date.getMinutes()).slice(-2); // 获取分钟，转为两位数
			var seconds = ("0" + date.getSeconds()).slice(-2); // 获取秒，转为两位数
		
			// 生成格式化的日期字符串
			return hours + ":" + minutes + ":" + seconds;
		}

		function buildContent(property) {
			const content = document.createElement("div");
			content.classList.add("property");
			content.innerHTML = `
			<div id='time'>
				${firstMarkerTime}
  			</div>
			<img class='tips_logo' id='dev_logo' src='map/starter_tracker.png'/>
			<div class='space'></div>
		    `;
			return content;
		}





		//路径点播放 
		function playTrackRecord() {
			playing = true;
			document.getElementById('custom-range').value = path.length - 1;
			index = 1;
			document.getElementById('time').style.display = 'flex';
			intervalPlaying();
		}

		function intervalPlaying() {
			interver = setInterval(() => {
				if (index == path.length) {
					showPlayProgress();
					clearInterval(interver);
					setTimeout(() => {
						document.getElementById('time').style.display = 'none';
					}, 2000);
					return;
				} else {
					marker.position = path[index];
					map.panTo(path[index]);
					marker.visible = true;
					document.getElementById('time').textContent = stampToDateTime(path[index].time);
				}
				index++;
			}, 500);
		}

		function hidePlayProgress() {
			var element = document.getElementById('bottom');
			element.classList.add('bottom_hidden');
			document.getElementById('playTrackRecord').style.display = "none";
			document.getElementById('palying_bottom').style.transform = "translateY(0%)";
		}

		function showPlayProgress() {
			index = 0;
			playing = false;
			clearInterval(interver);
			var element = document.getElementById('bottom');
			element.classList.remove('bottom_hidden');
			if(path.length>0){
				document.getElementById('playTrackRecord').style.display = "block";
			}
			document.getElementById('palying_bottom').style.transform = "translateY(100%)";
		}

		//暂停播放
		function pausePlayRecord() {
			playing = false;
			clearInterval(interver);
		}

		//继续播放
		function goOnPlayRecord() {
			playing = true;
			intervalPlaying();
		}
		//停止播放
		function stopPlayRecord() {
			document.getElementById('time').style.display = 'none';
			slideTime.style.display = 'none';
			marker.position = path[0];
			map.panTo(path[0]);
			showPlayProgress();
		}


		//移除路径
		function removeTrackRecord() {

			if (polyline) {
				path = [];
				pathList = [];
				polyline.setMap(null);
				polyline.setPath([]);
				polyline = null;
			}

			for (var i = 0; i < dotMarkerArray.length; i++) {
				dotMarkerArray[i].setMap(null);
				dotMarkerArray[i] = null;
			}
			dotMarkerArray = [];

		}

		//创建轨迹
		function createTrackRecord() {
			isTrackRecordMake = true;
			map.setCenter(path[0]);
			document.getElementById('bottom').style.opacity = 1;
			document.getElementById('bottom').style.display= 'block';
			if (path.length == 0) {
				document.getElementById('custom-range').style.background = "#D3D3D3";
				document.getElementById('playTrackRecord').style.display = "none";
				document.getElementById('custom-range').disabled = true;
				document.getElementById('custom-range').max = 1;
				document.getElementById('custom-range').value = 1;
			} else {
				firstMarkerTime = stampToDateTime(path[0].time);
				document.getElementById('custom-range').style.background = "#6ac695";
				document.getElementById('playTrackRecord').style.display = "block";
				document.getElementById('custom-range').disabled = false;
				document.getElementById('custom-range').max = path.length - 1;
				document.getElementById('custom-range').value = path.length - 1;
			}


			if (trackStyle == 1) {
				polyline = new google.maps.Polyline({
					path: path,
					geodesic: true,
					strokeColor: '#FF4500',
					strokeOpacity: 1.0,
					strokeWeight: 4,
					map: map
				});
			} else {
				
				path.forEach(function(item, index) {
					const playFlagImg = document.createElement("img");
					playFlagImg.style.width = '20px'
					playFlagImg.style.height = '20px'
					playFlagImg.src = 'map/footer_track.png'
					const marker = new google.maps.marker.AdvancedMarkerElement({
						map,
						position: path[index],
						content: playFlagImg,
					});
					//创建的marker 添加到数组 
					dotMarkerArray.push(marker);
				})
			} 
			if(path.length > 0){
				createMoveMarker();
			}
			
		}


		//Slider 滑动
		var slideTime = document.getElementById('slideTime');
		function updateValue(slider) {
			document.getElementById('time').style.display = 'flex';
			slideTime.style.display = 'flex';
			var sliderValue = slider.value;
			marker.position = path[sliderValue];
			map.panTo(path[sliderValue]);
			slideTime.textContent = stampToDateTime(path[sliderValue].time);
			document.getElementById('time').textContent = stampToDateTime(path[sliderValue].time);
			var sliderWidth = slider.offsetWidth;
			var range = parseInt(slider.max) - parseInt(slider.min);
			var percentage = (slider.value - slider.min) / range * 80;

			slideTime.style.left = `${percentage}%`;
			
		}

		function progressChange(slider) {

			slideTime.style.display = 'none';
			document.getElementById('time').style.display = 'none';
		}
		
		window.addEventListener('load', function() {
			// 页面包括图片、样式等外部资源全部加载完成后执行的代码
		});

		window.addEventListener('UniAppJSBridgeReady', function() {
			uni.postMessage({
				data: {
					msg: "getTrackRecord",
				}
			})
			window.getVueMessage = (data) => {
				console.log('app发来的消息:', JSON.stringify(data));
				if (data.type == 1000) {
					showPlayProgress();
					removeTrackRecord();
				} else {
					trackStyle = data.type;
					removeTrackRecord();
					path = data.msg;
					isTrackRecordMake = false;
					if (!map) {
						initMap();
					} else {
						createTrackRecord();
					}
				}
			}
			document.getElementById('playTrackRecord').onclick = function() {
				playTrackRecord();
				hidePlayProgress();
			}
			document.getElementById('play_btn').onclick = function() {
				if (playing) {
					document.getElementById('play_btn').src = './map/play_btn.png';
					pausePlayRecord();
				} else {
					document.getElementById('play_btn').src = './map/pause_btn.png';
					goOnPlayRecord();
				}
			}
			document.getElementById('stop_btn').onclick = function() {
				stopPlayRecord();
			}
			
			document.getElementById('custom-range').addEventListener('touchend', function() {
				
				if(path.length >0){
					// 滑动结束时的操作
					document.getElementById('time').style.display = 'none';
					document.getElementById('slideTime').style.display = 'none';
				}
			});
		});

		document.addEventListener('gesturestart', function(event) {
			event.preventDefault()
		})
	</script>